<template>
  <div style="width: 100%;height: 100%">
    <el-table empty-text="暂无数据"
              ref="el_table"
              highlight-current-row
              :data="tableData"
              border
              v-loading="tableLoading"
              @row-click="rowClick"
              style="width: 100%;height: 100%"
              @current-change="currentChange"
              @row-dblclick="rowDbClick"
              @select="selectChange"
              @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <template v-for="col in headers">
        <el-table-column :show-overflow-tooltip="true"  :formatter="cellValueFormatter" v-if="col.prop!=='operate' && !col.hidden"  header-align="center" align="center"   :column-key="col.prop" :prop="col.prop" :label="col.label" :sortable="col.sort"
                         resizable>
        </el-table-column>
        <!-- 自定义操作列-->
        <el-table-column v-else-if="col.prop==='operate' && !col.hidden" header-align="center" align="center" :label="col.label || '操作'">
          <template v-slot="scope">
          <template v-for="option in col.options">
            <el-button
              :size="option.size || 'mini'"
              :type="option.type || 'normal'"
              :disabled="scope.row.disableOptions && scope.row.disableOptions.includes(option.prop)"
              @click="customHandler(scope.$index, scope.row,option.prop)">{{option.label}}</el-button>
          </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-pagination v-if="page" background
                   layout="prev, pager, next, sizes, total, jumper"
                   :page-sizes="[5, 10, 15, 20]"
    :page-size="pageSize"
    :total="list.length"
    @current-change="handleCurrentChange"
    @size-change="handleSizeChange">
    </el-pagination>
  </div>

</template>
<script>
    export default {
        name: "XjrTable",
      computed:{
          tableData(){
            return this.list.slice((this.currPage - 1) * this.pageSize, this.currPage * this.pageSize)
          },
        tableLoading(){
            return this.loading;
        }
      },
      data(){
          return {
            pageSize:5,
            currPage:1
          }
      },
      props:{
        loading:{
          type:Boolean,
          default:false
        },
        list:{
          type:Array,
          default:[],
          required:true
        },
        headers:{
          type:Array,
          required:true
        },
        page:{
          type:Boolean,
          default:true
        }
      },
      methods:{
          //表格内容格式化
        cellValueFormatter(row,column,cellValue, index){
          let g=this;
          let columnConfig='';
          if (g.isNullOrEmpty(row[column.property])){
            return '';
          }
          g.headers.forEach((t,index)=>{
            if (t.prop===column.columnKey){
              columnConfig=t;
            }
          });
          if (columnConfig.dataType && columnConfig.dataType==='date'){
            return new Date(row[column.property]).Format('yyyy-MM-dd hh:mm');
          }else{
            return row[column.property];
          }
        },
        handleCurrentChange(currentPage) {
          this.currPage = currentPage;
        },
        handleSizeChange(currentPageSize) {
          this.pageSize = currentPageSize;
        },
        handleSelectionChange(val) {
          return this.$emit('select-change',val)
        },
        //当前行发生变化
        currentChange(currentRow, oldCurrentRow){
          return this.$emit('current-change',currentRow, oldCurrentRow);
        },
        //表格自定义列处理函数
        customHandler(rowIndex,row,customType){
          return this.$emit('custom-click',this.list.indexOf(row),row,customType);
        },
        //表格行点击事件
        rowClick(row, column, event){
          return this.$emit('row-click',row, column, event)
        },
        rowDbClick(row, column, event){
          return this.$emit('row-db=click',row, column, event);
        },
        //设置行选中
        setCurrentRow(row){
          return this.$refs.el_table.setCurrentRow(row);
        },
        //清空排序
        clearSort(){
          return this.$refs.el_table.clearSort();
        },
        //清空页码
        resetPage(){
          this.currPage=1;
        },
        selectChange(row){
          return this.$emit('select-change',row);
        }

      }
    }
</script>
<style scoped>
  .el-table td{
    padding: 0;
  }
  .el-pagination{
    text-align: right;
  }

</style>
